<template>
    <n-tooltip>
        <template #trigger>
            <el-button @click="pickLocation" type="primary">
                <n-icon>
                    <i class="fa fa-crosshairs" />
                </n-icon>
            </el-button>
        </template>
        定位
    </n-tooltip>

    <el-dialog v-model="showPicker" title="框选位置">
        <div class="cs-picker" ref="pickerRef" />
        <template #footer>
            <n-space justify="end">
                <el-button type="primary" @click="() => (showPicker = false)"
                    >保存</el-button
                >
            </n-space>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { nextTick, ref, watch, toRefs, shallowRef } from 'vue'
import { NSpace, NModal, NButton, NIcon, NTooltip } from 'naive-ui'
import iconList from '@/common/IconList'
import lodash from 'lodash'
import { ElMessage } from 'element-plus'
import { IMouseMoveEvent, IMovement } from '@/types/utils'
import { useBoxSelect, useCesium } from '@/hooks'
import { Drawer } from 'cesium-extends'

type IPos = number[]

// const props = defineProps({
//     loc: {
//         required: true,
//         type: Array as PropType<IPos>,
//         default: () => [0, 0, 0],
//     },
// })
const props = withDefaults(defineProps<{ box: IPos }>(), {
    box: () => [0, 0, 0, 0],
})

const emit = defineEmits<{
    'update:box': [params: number[]]
}>()

Cesium.Ion.defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhZTJkMzA0NS1mZjg2LTRkZjUtYjFjMi00ZWViOWVhNjdkZTUiLCJpZCI6NzU4MzEsImlhdCI6MTYzODkyOTMxMH0.G8NRwYdB5stq4MHuGtPOuRAEcrGxxkNNJJEtELCaRWs'
const pickerRef = ref<HTMLDivElement>()

const showPicker = ref(false)
const pickLocation = () => {
    showPicker.value = true
}

let viewer: Cesium.Viewer

const { initCesium } = useCesium()

let drawerTool: Drawer

const { getLtRbPos } = useBoxSelect()

watch(showPicker, () => {
    if (showPicker.value) {
        nextTick(async () => {
            viewer = initCesium(pickerRef.value)!
            // @ts-ignore
            drawerTool = new Drawer(viewer, {
                tips: {
                    init: '开始框选',
                    start: '左键添加点，右键移除点，双击结束绘制',
                },
            })

            drawerTool.start({
                type: 'RECTANGLE',
                once: false,
                oneInstance: true,
                finalOptions: {},
                onEnd(entities, positions) {
                    if (viewer) {
                        const ellipsoid = viewer?.scene.globe.ellipsoid

                        const cartographicArray =
                            ellipsoid?.cartesianArrayToCartographicArray(
                                positions,
                            )

                        const lnglatArray = cartographicArray?.map((item) => ({
                            longitude: Cesium.Math.toDegrees(item.longitude),
                            latitude: Cesium.Math.toDegrees(item.latitude),
                            height: item.height,
                        }))

                        const arr = getLtRbPos(lnglatArray)

                        emit('update:box', arr)
                    }
                },
            })
        })
    } else {
        if (viewer) {
            drawerTool?.destroy()

            console.log('box select destroyed')

            viewer.destroy()
        }
    }
})
</script>

<style lang="scss" scoped>
.cs-picker {
    // height: calc(100% - 60px);
    height: 600px;
    // width: 600px;
}
</style>
<style>
.cesium-viewer-bottom {
    display: none;
    /* top: 200px; */
}

.cesium-widget-credits {
    display: none;
}

.cesium-viewer-toolbar {
    top: 68px;
    left: 435px;
}

.cesium-baseLayerPicker-dropDown {
    z-index: 25;
    top: -4px;
    border-radius: 2px;
}
</style>
